<template>
  <div class="app-container">
    <div class="payment-form-container">
      <el-card class="payment-form-card">
        <div slot="header" class="card-header">
          <span>支付宝支付</span>
        </div>
        
        <el-form :model="form" :rules="rules" ref="paymentForm" label-width="140px">
          <el-form-item label="订单标题/商品描述:" prop="title" required>
            <el-input 
              v-model="form.title" 
              placeholder="请输入订单标题或商品描述"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="订单金额:" prop="amount" required>
            <el-input 
              v-model="form.amount" 
              placeholder="请输入订单金额"
              type="number"
              step="0.01"
              min="0.01"
            >
              <template slot="append">元</template>
            </el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              单位: 元 (测试建议0.01元)
            </div>
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="success" 
              icon="el-icon-credit-card" 
              @click="handlePay"
              :loading="payLoading"
            >
              立即支付
            </el-button>
            <el-button 
              type="warning" 
              icon="el-icon-refresh-left" 
              @click="handleSwitchPayment"
            >
              切换支付方式
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { createPaymentOrder } from '@/api/payment'

export default {
  name: "AlipayPayment",
  data() {
    return {
      form: {
        title: '',
        amount: 0.01,
        paymentMethod: 'alipay'
      },
      rules: {
        title: [
          { required: true, message: '请输入订单标题或商品描述', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入订单金额', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '金额必须大于0.01元', trigger: 'blur' }
        ]
      },
      payLoading: false
    }
  },
  methods: {
    handlePay() {
      this.$refs.paymentForm.validate((valid) => {
        if (valid) {
          this.payLoading = true
          createPaymentOrder(this.form).then(response => {
            this.$message.success('支付订单创建成功')
            // 这里可以跳转到支付宝支付页面
            console.log('支付响应:', response)
            this.payLoading = false
          }).catch(error => {
            this.$message.error('支付订单创建失败')
            this.payLoading = false
          })
        }
      })
    },
    handleSwitchPayment() {
      this.$router.push('/payment')
    }
  }
}
</script>

<style scoped lang="scss">
.payment-form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  
  .payment-form-card {
    .card-header {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
    
    .el-form {
      .el-form-item {
        margin-bottom: 25px;
        
        .el-input {
          width: 100%;
        }
        
        .form-tip {
          margin-top: 8px;
          font-size: 12px;
          color: #909399;
          
          i {
            margin-right: 4px;
          }
        }
      }
      
      .el-button {
        margin-right: 15px;
        padding: 12px 24px;
        font-size: 14px;
      }
    }
  }
}
</style>
